<template>
  <BasicContainer>
    <ElRow :span="24">
      <ElCol :md="4">
        <ElRow>
          <ElDatePicker v-model="beginTime" class="input_width" placeholder="选择开始时间" @change="check" />
        </ElRow>
        <ElRow>
          <ElDatePicker v-model="endTime" class="input_width" placeholder="选择结束时间" @change="check" />
        </ElRow>
        <ElRow>
          <FyTree class="input_width" :option="treeOption" :data="treeData" @node-click="nodeClick" />
        </ElRow>
      </ElCol>
      <ElCol :md="20">
        <ElRow>
          <ElCol :span="12">
            <ECharts :options="userCumulate" />
          </ElCol>
          <ElCol :span="12">
            <ECharts :options="interfaceSummary" />
          </ElCol>
        </ElRow>
        <ElRow>
          <ElCol :span="12">
            <ECharts :options="upstreamMsgDistMonth" />
          </ElCol>
          <ElCol :span="12">
            <ECharts :options="userShard" />
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </BasicContainer>
</template>

<script>
  import { fetchAccountList, fetchStatistics } from '@/api/mp/wx-account'
  import * as echarts from 'echarts/core'
  // 引入柱状图图表，图表后缀都为 Chart
  import { BarChart, LineChart, PieChart } from 'echarts/charts'
  // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
  import {
    DatasetComponent,
    GridComponent,
    LegendComponent,
    TitleComponent,
    TooltipComponent
  } from 'echarts/components'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
  import { SVGRenderer } from 'echarts/renderers'

  // 注册必须的组件
  echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    SVGRenderer,
    BarChart,
    LineChart,
    PieChart
  ])

  export default {
    data() {
      return {
        beginTime: new Date() - 3600 * 1000 * 24 * 7,
        endTime: new Date() - 3600 * 1000 * 24,
        q: {
          interval: undefined,
          appId: undefined
        },
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            labelText: '标题',
            label: 'name',
            value: 'appid',
            children: 'children'
          }
        },
        treeData: [],
        userCumulate: {
          color: ['#409EFF'],
          title: {
            text: '用户分析数据'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 5 // 设置线条粗细
                  }
                }
              }
            }
          ]
        },
        userShard: {
          color: ['#409EFF'],
          title: {
            text: '图文分享数据'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 5 // 设置线条粗细
                  }
                }
              }
            }
          ]
        },
        upstreamMsgDistMonth: {
          color: ['#409EFF'],
          title: {
            text: '消息分析数据'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 5 // 设置线条粗细
                  }
                }
              }
            }
          ]
        },
        interfaceSummary: {
          color: ['#409EFF'],
          tooltip: {
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          title: {
            text: '接口分析数据'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'bar'
            }
          ]
        }
      }
    },
    created() {
      this.getAccountList()
    },
    methods: {
      nodeClick(data) {
        this.check()
        this.q.appId = data.appid
        this.q.interval = `${new Date(this.beginTime).getTime()}-${new Date(this.endTime).getTime()}`
        fetchStatistics(this.q).then(response => {
          this.userCumulate.series[0].data = response.data.data[0]
          this.userCumulate.xAxis.data = response.data.data[4]
          this.userShard.series[0].data = response.data.data[1]
          this.userShard.xAxis.data = response.data.data[4]
          this.upstreamMsgDistMonth.series[0].data = response.data.data[2]
          this.upstreamMsgDistMonth.xAxis.data = response.data.data[4]
          this.interfaceSummary.series[0].data = response.data.data[3]
          this.interfaceSummary.xAxis.data = response.data.data[4]
        })
      },
      getAccountList() {
        fetchAccountList().then(response => {
          this.treeData = response.data.data
          // 默认选中第一个
          if (this.treeData.length > 0) {
            this.nodeClick(this.treeData[0])
          }
        })
      },
      check() {
        const start = new Date(this.beginTime)
        const end = new Date(this.endTime)

        if (end.getDate() >= new Date()) {
          this.$message.error('统计结束日小于，请重新选择')
          return false
        }

        if (end.getTime() - start.getTime() > 3600 * 1000 * 24 * 7) {
          this.$message.error('时间间隔7天以内，请重新选择')
          return false
        }
      }
    }
  }
</script>

<style scoped>
  .input_width {
    width: 80%;
  }
</style>
